<template>
  <view class="page-content">
    <view class="mine-content-head">
      <image class="mine-image-bg" src="../../static/image/bg-5.png"></image>
      <view class="mine-head" @click="updateUserInfo">
        <!-- <image
          class="mine-head-image"
          src="../../static/image/bg-4.png"
        ></image> -->
        <view class="mine-head-avatar">
          <up-avatar size="120rpx" :src="userInfo.avatarUrl"></up-avatar>
          <view class="mine-head-edit"
            ><up-icon size="12" name="edit-pen-fill" color="#fff"></up-icon
          ></view>
        </view>
        <view class="mine-head-image-text">
          <view class="user-info-nick-name">
            {{ userInfo.nickName }}
          </view>
          <view class="user-info-id"> ID:{{ userInfo.nickId }} </view>
        </view>
      </view>
    </view>
    <view class="order-tab">
      <view
        class="order-tab-item"
        v-for="item in orderType"
        :key="item.id"
        @click="jumpOrder(item)"
      >
        <image class="order-tab-item-image" :src="item.img"></image>
        <view class="item-text">{{ item.text }}</view>
      </view>
    </view>
    <view class="setting-list">
      <view class="setting-item" @click="jumpByNurse()">
        <text class="setting-item-title">被护理人</text>
        <view class="setting-item-icon"
          ><uni-icons type="right" size="20" color="#999"></uni-icons
        ></view>
      </view>
      <view class="setting-item" @click="jumpAddress()">
        <text class="setting-item-title">地址管理</text>
        <view class="setting-item-icon"
          ><uni-icons type="right" size="20" color="#999"></uni-icons
        ></view>
      </view>
    </view>
    <button class="setting-item-btn" open-type="contact" @click="handleContact">
      联系客服
    </button>
  </view>
</template>

<script setup>
import { onMounted, ref } from "vue";
import icon3 from "../../static/image/icon-3.png";
import icon4 from "../../static/image/icon-4.png";
import icon5 from "../../static/image/icon-5.png";
import icon6 from "../../static/image/icon-6.png";

import { getStorageData, setStorageData } from "@/utils/storageData.js";

import {
  GetLoginInfo, // 获取用户信息
} from "@/api/common.js";
import { onShow } from "@dcloudio/uni-app";

let userInfo = ref({});

let orderType = ref([
  {
    id: -1,
    img: icon3,
    text: "全部",
  },
  {
    id: 1,
    img: icon4,
    text: "已支付",
  },
  {
    id: 0,
    img: icon5,
    text: "未支付",
  },
  {
    id: 3,
    img: icon6,
    text: "已取消",
  },
]);

const jumpOrder = (item) => {
  console.log(item, "d");
  uni.navigateTo({
    url: "/pages/mine/orderList/index?types=" + item.id,
  });
};

const jumpByNurse = () => {
  uni.navigateTo({
    url: "/pages/mine/byNurse/index",
  });
};

const jumpAddress = () => {
  uni.navigateTo({
    url: "/pages/mine/address/index",
  });
};

const updateUserInfo = () => {
  uni.navigateTo({
    url: "/pages/mine/updateUserInfo",
  });
};

const handleContact = (ev) => {
  console.log(ev, "ev");
};

onShow(() => {
  userInfo.value = JSON.parse(getStorageData("userInfo"));
});

onMounted(async () => {
  let { data } = await GetLoginInfo();
  userInfo.value = data;
  setStorageData("userInfo", JSON.stringify(data));
});
</script>

<style scoped lang="scss">
.page-content {
  min-height: 100vh;
  background: #f2f2f2;
}
.mine-content-head {
  position: relative;
  padding-top: var(--status-bar-height);
  .mine-image-bg {
    display: block;
    width: 100vw;
    position: absolute;
    top: 0;
    left: 0;
  }
}
.mine-head {
  position: relative;
  padding: 80rpx 40rpx 20rpx 40rpx;
  z-index: 999;
  display: flex;
  align-items: center;
  .mine-head-image {
    width: 120rpx;
    height: 120rpx;
  }
  .mine-head-image-text {
    font-size: 40rpx;
    color: $u-primary;
    margin-left: 20rpx;
  }
}
.order-tab {
  display: flex;
  padding: 40rpx 20rpx;
  margin: 20rpx;
  background: #fff;
  border-radius: 16rpx;
  position: relative;
  z-index: 9999;
}
.order-tab-item-image {
  width: 60rpx;
  height: 60rpx;
  display: block;
  margin: 0 auto;
}
.order-tab-item {
  width: 25%;
  text-align: center;
  .item-text {
    color: #999;
    margin-top: 10rpx;
    font-size: 28rpx;
  }
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20rpx;
  padding: 20rpx;
  border-radius: 16rpx;
  background: #fff;
}

.setting-item-btn {
  font-size: 32rpx;
  border: none;
  padding: 0;
  margin: 0;
  position: fixed;
  bottom: 5vh;
  left: 20rpx;
  right: 20rpx;
  color: #1dcb91;
  background: none;
  &::after {
    display: none;
    border: none !important;
  }
}
.user-info-nick-name {
  font-size: 36rpx !important;
}
.user-info-id {
  font-size: 24rpx;
  color: #999;
  margin-top: 6rpx;
}
.mine-head-avatar {
  width: 120rpx;
  height: 120rpx;
  position: relative;
  .mine-head-edit {
    position: absolute;
    right: 10rpx;
    bottom: -2rpx;
    width: 32rpx;
    height: 32rpx;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 32rpx;
    align-items: center;
    justify-content: center;
  }
  ::v-deep .u-icon {
    justify-content: center;
    height: 32rpx;
  }
}
</style>
